<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>

	<style type="text/css">
.ui-layout-north {
	z-index: 20 !important;
	overflow: visible;
}

.ui-layout-north .ui-layout-unit-content {
	overflow: visible;
}

.ui-widget {
	font-size: 9px !important;
}

.centro {
	top: 50%
}

.tabela {
	width: 750px;
}

.size {
	width: 800px;
	position: absolute;
	left: 16%;
	top: 10%;
}
</style>
	<title>Cadastro de Equipamento</title>
</h:head>

<h:body>

	<ui:decorate template="/templateBase.xhtml">
		<ui:define name="center">
			<p:growl id="growl" life="3000" autoUpdate="true" />
			<h:form id="cadEquipamento" acceptcharset="ISO-8859-1" lang="pt">
				<br />
				<br />
				<br />
				<p:panel styleClass="size" header="Cadastro de Equipamento"
					footer="Integração - Portal de Serviços e Comunicação">

					<br />

					<h:outputText value="ID" />
					<h:panelGrid columns="2">
						<p:inputText size="5" readonly="true"
							value="#{equipamentoBacking.eqSalvar.id}" />
						<p:commandButton icon="ui-icon-search"
							onclick="dlgPesquisa.show()" update=":formPesquisa"
							process="@this" />
					</h:panelGrid>


					<h:panelGrid>
						<h:outputText value="Tipo" />
						<p:selectOneMenu value="#{equipamentoBacking.codTipoEquipamento}"
							required="true" requiredMessage="Informe o tipo do equipamento!">
							<f:selectItem itemLabel="Selecione" itemDisabled="true" />
							<f:selectItems value="#{equipamentoBacking.listaTipoEquipamento}"
								var="t" itemLabel="#{t.descricao}" itemValue="#{t.id}" />
							<p:ajax listener="#{equipamentoBacking.habilitaCampoIp}"
								update="cadEquipamento" />
						</p:selectOneMenu>

						<h:outputText value="Descrição" />
						<p:inputText size="80" required="true"
							requiredMessage="Informe a descrição para o equipamento!"
							value="#{equipamentoBacking.eqSalvar.descricao}" />

						<h:outputText value="IP" rendered="#{equipamentoBacking.labelIp}"
							id="labelIp" />
						<p:inputText size="20" value="#{equipamentoBacking.eqSalvar.ip}"
							id="txtIp" rendered="#{equipamentoBacking.txtIp}" />
					</h:panelGrid>

					<h:panelGrid columns="3">

						<h:panelGrid>
							<h:outputText value="Departamento" />
							<p:selectOneMenu required="true"
								requiredMessage="Informe o departamento!"
								value="#{equipamentoBacking.codDepartamentoSelecionado}">
								<f:selectItem itemLabel="Selecione" itemDisabled="true" />
								<f:selectItems value="#{equipamentoBacking.listaDepartamento}"
									var="d" itemLabel="#{d.nome}" itemValue="#{d.id}" />
							</p:selectOneMenu>
						</h:panelGrid>

						<h:panelGrid>
							<h:outputText value="Marca" />
							<p:selectOneMenu required="true"
								requiredMessage="Informe a marca do equipamento!"
								value="#{equipamentoBacking.codMarcaSelecionada}">
								<f:selectItem itemLabel="Selecione" itemDisabled="true" />
								<f:selectItems value="#{equipamentoBacking.listaMarca}" var="m"
									itemLabel="#{m.descricao}" itemValue="#{m.id}" />
							</p:selectOneMenu>

						</h:panelGrid>

						<h:panelGrid>
							<h:outputText value="Patrimonio" />
							<p:inputText size="20"
								value="#{equipamentoBacking.eqSalvar.patrimonio}" />

						</h:panelGrid>

						<h:panelGrid>
							<h:outputText value="Status" />
							<p:selectOneMenu value="#{equipamentoBacking.eqSalvar.status}"
								required="true"
								requiredMessage="Informe o status atual do equipamento!">
								<f:selectItem itemLabel="Selecione" itemDisabled="true" />
								<f:selectItem itemLabel="Disponível para uso"
									itemValue="Disponível para uso" />
								<f:selectItem itemLabel="Em Manutenção"
									itemValue="Em Manutenção" />
								<f:selectItem itemLabel="Em Atividade" itemValue="Em Uso" />
								<f:selectItem itemLabel="Inativo" itemValue="Inativo" />
							</p:selectOneMenu>
						</h:panelGrid>
						<br />
					</h:panelGrid>

					<h:panelGrid>
						<h:outputText value="Deseja permitir agendamento?" />
						<h:selectOneRadio required="true"
							value="#{equipamentoBacking.eqSalvar.permiteAgendamento}"
							requiredMessage="Informe sobre o agendamento!">
							<f:selectItem itemLabel="Sim" itemValue="Sim" />
							<f:selectItem itemLabel="Não" itemValue="Nao" />
						</h:selectOneRadio>
					</h:panelGrid>


					<br />
					<div align="center">
						<h:panelGrid columns="2">
							<p:commandButton value="Salvar" icon="ui-icon-check"
								actionListener="#{equipamentoBacking.salvarEquipamento}"
								ajax="false" />
							<p:commandButton value="Limpar" icon="ui-icon-cancel"
								actionListener="#{equipamentoBacking.reset}"
								update="cadEquipamento" />
						</h:panelGrid>
					</div>

					<br />
					<p:separator />
					<br />
					<div align="right">
						<p:commandButton icon="ui-icon-circle-plus" value="Adicionar"
							oncomplete="dlgComponente.show()" />
					</div>
					<br />
					<p:dataTable
						value="#{equipamentoBacking.listaComponenteEquipamento}" var="ce"
						id="tblComponentes"
						emptyMessage="Nenhum componente encontrado para este equipamento!"
						paginator="true" rows="5">

						<p:column headerText="Qtd. ">
							<div align="center">
								<h:outputText value="#{ce.componente.quantidade}" />
							</div>
						</p:column>

						<p:column headerText="Componente ">
							<h:outputText value="#{ce.componente.descricao}" />
						</p:column>

						<p:column headerText="Tamanho ">
							<div align="center">
								<h:outputText value="#{ce.tamanho}" />
							</div>
						</p:column>

						<p:column headerText="Unid. de Medida">
							<div align="center">
								<h:outputText value="#{ce.unidMedida}" />
							</div>
						</p:column>

					</p:dataTable>
					<br />
				</p:panel>
			</h:form>

			<p:dialog widgetVar="dlgComponente" hideEffect="clip"
				showEffect="clip" header="Cadastro de Componentes do Equipamento"
				footer="Integração - Portal de Serviços e Comunicação" height="300"
				width="500" appendToBody="true">
				<h:form id="formComponente">
					<br />

					<h:panelGrid>
						<h:outputText value="Componente" />
						<p:selectOneMenu required="true"
							requiredMessage="Informe o componente!"
							value="#{equipamentoBacking.codComponenteSelecionado}">
							<f:selectItem itemDisabled="true" itemLabel="Selecione" />
							<f:selectItems value="#{equipamentoBacking.listaComponente}"
								var="c" itemLabel="#{c.descricao}" itemValue="#{c.id}" />
						</p:selectOneMenu>

						<h:outputText value="Complemento" />
						<p:inputText size="30" maxlength="30"
							value="#{equipamentoBacking.ceSalvar.complemento}" />

						<h:outputText value="Qtd" />
						<p:selectOneMenu value="#{equipamentoBacking.ceSalvar.quantidade}"
							required="true" requiredMessage="Informe a quantidade!">
							<f:selectItem itemLabel="Selecione" itemDisabled="true" />
							<f:selectItem itemLabel="1" itemValue="1" />
							<f:selectItem itemLabel="2" itemValue="2" />
							<f:selectItem itemLabel="3" itemValue="3" />
							<f:selectItem itemLabel="4" itemValue="4" />
							<f:selectItem itemLabel="5" itemValue="5" />
						</p:selectOneMenu>

						<h:outputText value="Tamanho" />
						<p:inputText size="10" maxlength="4" required="true"
							requiredMessage="Informe o tamanho!"
							value="#{equipamentoBacking.ceSalvar.tamanho}" />

						<h:outputText value="Unid. Medida" />
						<p:selectOneMenu value="#{equipamentoBacking.ceSalvar.unidMedida}"
							required="true" requiredMessage="Informe a unidade de medida!">
							<f:selectItem itemDisabled="true" itemLabel="Selecione" />
							<f:selectItem itemLabel="KB" itemValue="KB" />
							<f:selectItem itemLabel="GB" itemValue="GB" />
							<f:selectItem itemLabel="GHz" itemValue="GHz" />
							<f:selectItem itemLabel="MB" itemValue="MB" />
							<f:selectItem itemLabel="MHz" itemValue="MHz" />
							<f:selectItem itemLabel="Polegadas" itemValue="Polegadas" />
							<f:selectItem itemLabel="Unidade" itemValue="Unidade" />
						</p:selectOneMenu>
					</h:panelGrid>
					<br />
					<p:separator />
					<div align="center">
						<h:panelGrid columns="2">
							<p:commandButton value="Salvar" icon="ui-icon-check"
								update=":cadEquipamento:tblComponentes"
								actionListener="#{equipamentoBacking.salvaComponente}" />
							<p:commandButton value="Cancelar" icon="ui-icon-cancel"
								oncomplete="dlgComponente.hide()" />
						</h:panelGrid>
					</div>
				</h:form>
			</p:dialog>

			<p:dialog widgetVar="dlgPesquisa" hideEffect="clip" showEffect="clip"
				header="Pesquisa Equipamento"
				footer="Integração - Portal de Serviços e Comunicação" height="400"
				width="700" appendToBody="true">
				<h:form id="formPesquisa">
					<br />
					<p:dataTable value="#{equipamentoBacking.listaEquipamento}" var="e"
						paginator="true" rows="10">

						<p:column headerText="ID">
							<div align="center">
								<h:outputText value="#{e.id}" />
							</div>
						</p:column>

						<p:column headerText="Descrição" sortBy="#{e.descricao}">
							<h:outputText value="#{e.descricao}" />
						</p:column>

						<p:column headerText="Tipo" sortBy="#{e.tipo.descricao}">
							<div align="center">
								<h:outputText value="#{e.tipo.descricao}" />
							</div>
						</p:column>

						<p:column headerText="Marca">
							<div align="center">
								<h:outputText value="#{e.marca.descricao}" />
							</div>
						</p:column>

						<p:column headerText="Departamento" sortBy="#{e.depto.nome}">
							<div align="center">
								<h:outputText value="#{e.depto.nome}" />
							</div>
						</p:column>

						<p:column headerText="Ações">
							<div align="center">
								<p:commandButton title="Selecionar" icon="ui-icon-check"
									oncomplete="dlgPesquisa.hide()"
									actionListener="#{equipamentoBacking.selecionaEquipamento(e)}"
									update=":cadEquipamento" />
							</div>
						</p:column>

					</p:dataTable>
				</h:form>
			</p:dialog>


		</ui:define>
	</ui:decorate>
</h:body>
</html>